<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务预约系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
     /* 引入Google字体 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* 全局样式 */
body, html {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #ffffff, #e6f7ff);
    font-size: 18px;
    letter-spacing: 1px;
    word-spacing: 2px;
    color: #333;
}

/* 导航栏样式 */
.nav {
    background-color: white;
    border-bottom: 1px solid #ddd;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav a {
    text-decoration: none;
    color: #333;
    padding: 12px 24px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.nav a.active {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

.nav a:hover {
    transform: translateY(-2px);
}


/* 容器样式 */
.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: auto;
    padding: 20px;
    max-width: 1200px;
    padding-top: 100px;
}

/* 预约表单样式 */
.booking-form {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 40px;
    margin-bottom: 30px;
}

.hidden {
    display: none;
}

#userInfo p {
    margin-bottom: 10px;
    color: #333;
}

/* 支付方式样式 */
.payment-method {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.payment-method label {
    margin-top: 0;
    margin-right: 10px;
    color: #333;
}

.payment-method input {
    margin-top: 0;
    margin-right: 5px;
}

/* 文本域样式 */
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 150px;
    resize: vertical;
    font-family: 'Open Sans', sans-serif;
}

/* 按钮样式 */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 5px;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

button:active {
    background-color: #004085;
}

button[type="submit"] {
    margin-top: 20px;
    padding: 15px 30px;
    font-weight: bold;
    background-color: #28a745;
}

button[type="cancel"] {
    background-color: #6c757d;
}

button[type="cancel"]:hover {
    background-color: #545b62;
}

button[type="confirm"] {
    background-color: #28a745;
}

button[type="confirm"]:hover {
    background-color: #1e7e34;
}

/* 优惠券码样式 */
.discount-code {
    margin-top: 20px;
}

/* 总费用样式 */
.total-fee {
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
    color: #333;
}

/* 预约信息确认样式 */
#bookingSummary {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }

    .nav a {
        padding: 10px;
        margin-bottom: 5px;
    }

    .container {
        padding: 10px;
    }

    .booking-form {
        padding: 20px;
    }
}
    </style>
</head>
<body>
    <div class="nav">
        <a href="appointment_booking" class="active">服务预约</a>
        <a href="health_status" class="">健康状况</a>
        <a href="my_profile" class="">我的</a>
    </div>

    <div class="container">
        <!-- 服务预约 -->
        <div id="booking" class="booking-form">
            <!-- 预约者个人信息 -->
            <div id="userInfo">
                <p>姓名: {{ user_phone_info.name}}</p>
                <p>联系电话: {{ user_phone_info.childphone }}</p>
            </div>

            <label for="serviceType">服务类型:</label>
            <select id="serviceType" name="serviceType" onchange="updateServiceFee()">
                <option value="bed_fee">床位费 - 1000元</option>
                <option value="transport_fee">接送费 - 500元</option>
                <option value="nursing_fee">护理费 - 2000元</option>
            </select>
            <!-- 预约时间 -->
            <label for="bookingDatetime">预约时间:</label>
            <input type="datetime-local" id="bookingDatetime" name="bookingDatetime">

           <!-- 支付方式 -->
    <div class="payment-method">
        <input type="radio" id="现金" name="payment" value="现金" checked>
        <label for="现金">现金</label>
        <input type="radio" id="信用卡" name="payment" value="信用卡">
        <label for="信用卡">信用卡</label>
        <input type="radio" id="在线支付" name="在线支付" value="在线支付">
        <label for="在线支付">在线支付</label>
    </div>


           <!-- 优惠券码 -->
            <div class="discount-code">
                <label for="discountCode">优惠券码:</label>
                <input type="text" id="discountCode" name="discountCode" onchange="applyDiscount()" placeholder="输入优惠券码">
            </div>

            <!-- 备注 -->
            <label for="orderNotes">备注:</label>
            <textarea id="orderNotes" name="orderNotes" placeholder="请输入您的备注..."></textarea>
 <div class="total-fee">
            <p>总费用: <span id="totalFeeDisplay">1000元</span></p>
            </div>
            <!-- 全部订单按钮 -->
    <button onclick="location.href='/appointment_booking_all';" style="background-color: #20c997; color: white; margin-left: 20px; padding: 15px 30px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease;">
        全部订单
    </button>
</a>
            <!-- 提交按钮 -->
            <button onclick="showBookingSummary()">提交预约</button>
        </div>

        <!-- 预约信息确认 -->
        <div id="bookingSummary" class="hidden">
            <h3>预约信息确认</h3>
            <p><span id="summaryName">{{ user_phone_info.name}}</span></p>
            <p>服务类型: <span id="summaryServiceType"></span></p>
            <p>预约时间: <span id="summaryBookingTime"></span></p>
            <p>支付方式: <span id="summaryPaymentMethod"></span></p>
            <p>优惠券码: <span id="summaryDiscountCode"></span></p>
            <p>备注: <span id="summaryNotes"></span></p>
            <p>总费用: <span id="summaryTotalFee"></span></p>
            <button onclick="confirmBooking()">确认预约</button>
            <button onclick="cancelBooking()">取消</button>
        </div>
    </div>

 <script>
    // 显示对应部分的函数
    function showSection(sectionId) {
        var sections = document.querySelectorAll('.booking-form, #bookingSummary');
        sections.forEach(function(section) {
            section.classList.add('hidden');
        });
        document.getElementById(sectionId).classList.remove('hidden');
    }

    // 更新服务费用显示
    function updateServiceFee() {
        var selectedOption = document.getElementById('serviceType').options[document.getElementById('serviceType').selectedIndex];
        var fee = selectedOption.textContent.split('-')[1].trim();
        document.getElementById('totalFeeDisplay').textContent = fee;
    }

    // 应用优惠券码
    function applyDiscount(code) {
        var feeDisplay = document.getElementById('totalFeeDisplay');
        var currentFee = parseInt(feeDisplay.textContent.split('元')[0], 10);
        if (code === '666666') {
            feeDisplay.textContent = (currentFee - 50)+'元';
        } else {
            // 如果优惠券码无效，恢复原来的费用
            var serviceFee = document.getElementById('serviceType').options[document.getElementById('serviceType').selectedIndex].textContent.split('-')[1].trim().split('元')[0];
            feeDisplay.textContent = serviceFee;
        }
    }

    // 显示预约信息确认框
    function showBookingSummary() {
        var userInfo = {
            name: document.getElementById('userInfo').querySelector('p:first-child').textContent,
            phone: document.getElementById('userInfo').querySelector('p:nth-child(2)').textContent.replace('联系电话: ', ''),
            email: document.getElementById('userInfo').querySelector('p:last-child').textContent.replace('邮箱: ', '')
        };
        var serviceType = document.getElementById('serviceType').value;
        var bookingDatetime = document.getElementById('bookingDatetime').value;
        var paymentMethod = document.querySelector('input[name="payment"]:checked').value;
        var discountCode = document.getElementById('discountCode').value;
        var orderNotes = document.getElementById('orderNotes').value;
        var totalFee = document.getElementById('totalFeeDisplay').textContent;

        // 填充预约信息确认框的数据
        document.getElementById('summaryName').textContent = userInfo.name;
        document.getElementById('summaryServiceType').textContent = serviceType;
        document.getElementById('summaryBookingTime').textContent = bookingDatetime;
        document.getElementById('summaryPaymentMethod').textContent = paymentMethod;
        document.getElementById('summaryDiscountCode').textContent = discountCode;
        document.getElementById('summaryNotes').textContent = orderNotes;
        document.getElementById('summaryTotalFee').textContent = totalFee;

        showSection('bookingSummary');
    }

    // 取消预约信息确认框
    function cancelBooking() {
        document.getElementById('bookingSummary').classList.add('hidden');
        showSection('booking');
    }

    // 确认预约并发送数据到后端
    function confirmBooking() {
        var bookingData = {
            user: {
                name: document.getElementById('summaryName').textContent,
                phone: userInfo.phone,
                email: userInfo.email
            },
            serviceType: document.getElementById('summaryServiceType').textContent,
            bookingDatetime: document.getElementById('summaryBookingTime').textContent,
            paymentMethod: document.getElementById('summaryPaymentMethod').textContent,
            discountCode: document.getElementById('summaryDiscountCode').textContent,
            notes: document.getElementById('summaryNotes').textContent,
            totalFee: document.getElementById('summaryTotalFee').textContent
        };

        // 发送数据到后端的逻辑（请根据实际后端API进行调整）
        fetch('/send_appointment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(bookingData),
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            console.log('Success:', data);
            alert('您已预约成功！');
            cancelBooking();
            resetBookingForm();
        })
        .catch(error => {
            console.error('Error:', error);
            alert('您已预约成功！');
        });
    }

    // 重置预约表单
    function resetBookingForm() {
        document.getElementById('serviceType').selectedIndex = 0;
        document.getElementById('bookingDatetime').value = '';
        document.getElementById('discountCode').value = '';
        document.getElementById('orderNotes').value = '';
        document.getElementById('cash').checked = true;
        document.getElementById('totalFeeDisplay').textContent = document.getElementById('serviceType').options[0].textContent.split('-')[1].trim();
    }

    // 页面加载后初始化
    document.addEventListener('DOMContentLoaded', function() {
        updateServiceFee(); // 初始化服务费用显示
        document.getElementById('serviceType').onchange = updateServiceFee; // 绑定服务类型变化事件
        document.getElementById('discountCode').onchange = function() {
            applyDiscount(document.getElementById('discountCode').value); // 应用优惠券码
        };
    });
</script>
</body>
</html>